<template>
<!-- <h3>模板语法</h3>
<p>{{ msg }}</p>
<p>{{ hello }}</p>
<p>{{ number+1 }}</p>
<p>{{ ok? "Yes":"No" }}</p>
<p>{{ message.split("").reverse().join("") }}</p>
<p>{{ rawHtml }}</p>
<p v-html="rawHtml"></p> 
<HelloWorld msg="You did it!"/>
<IfDemo msg = "if demo"></IfDemo>
<ListDemo msg="list demo"></ListDemo>
<KeyDemo msg = "key demo"></KeyDemo>

<EventDemo1 ></EventDemo1>
<EventDemo2 ></EventDemo2>
<EventDemo3 ></EventDemo3>
<EventDemo4 ></EventDemo4>
<EventDemo5 ></EventDemo5>
<ArrayListDemo></ArrayListDemo>


<ComputeDemo></ComputeDemo>
<ClassDemoVue></ClassDemoVue>
<StyleDemo></StyleDemo>

<WatchDemo></WatchDemo>
<FromDemo/>
-->
<RefDemo/>


</template>

<script setup>

import HelloWorld from './components/HelloWorld.vue';
import IfDemo from './components/IfDemo.vue';
import ListDemo from './components/ListDemo.vue';
import KeyDemo from './components/KeyDemo.vue';
import EventDemo1 from './components/EventDemo1.vue';
import EventDemo2 from './components/EventDemo2.vue';
import EventDemo3 from './components/EventDemo3.vue';
import EventDemo4 from './components/EventDemo4.vue';
import EventDemo5 from './components/EventDemo5.vue';

import ArrayListDemo from './components/ArrayListDemo.vue';
import ComputeDemo from './components/ComputeDemo.vue';

import ClassDemoVue from './components/ClassDemo.vue';
import StyleDemo from './components/StyleDemo.vue';
import WatchDemo from './components/WatchDemo.vue';

import FromDemo from './components/FromDemo.vue';
import RefDemo from './components/RefDomDemo.vue';

</script>
